<!-- 删除确认 Hook 使用示例 -->
<template>
  <div class="delete-demo">
    <h3>删除确认 Hook 使用示例</h3>

    <el-space direction="vertical" size="large" style="width: 100%">
      <!-- 基础删除 -->
      <el-card header="基础删除">
        <el-button type="danger" @click="handleBasicDelete">删除单条数据</el-button>
        <p class="demo-desc">最简单的删除确认，适用于删除单条数据</p>
      </el-card>

      <!-- 批量删除 -->
      <el-card header="批量删除">
        <div>
          <el-checkbox-group v-model="selectedItems">
            <el-checkbox v-for="item in items" :key="item.id" :value="item.id">
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="margin-top: 12px">
          <el-button type="danger" @click="handleBatchDelete">批量删除 ({{ selectedItems.length }})</el-button>
        </div>
        <p class="demo-desc">批量删除选中的多条数据，会显示删除数量</p>
      </el-card>

      <!-- 危险删除 -->
      <el-card header="危险删除">
        <el-button type="danger" @click="handleDangerousDelete">执行危险删除</el-button>
        <p class="demo-desc">需要输入确认文本的危险删除操作</p>
      </el-card>

      <!-- 自定义删除 -->
      <el-card header="自定义删除">
        <el-button type="danger" @click="handleCustomDelete">自定义删除确认</el-button>
        <p class="demo-desc">完全自定义的删除确认弹窗</p>
      </el-card>
    </el-space>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useDeleteConfirm, deleteConfirm } from '@/hooks/useDeleteConfirm'

// 示例数据
const items = ref([
  { id: 1, name: '用户张三' },
  { id: 2, name: '用户李四' },
  { id: 3, name: '用户王五' },
  { id: 4, name: '用户赵六' },
])

const selectedItems = ref([])

// 初始化删除确认 hook
const deleteConfirmHook = useDeleteConfirm({
  title: '系统提示',
  subMessage: '删除后将无法恢复，请谨慎操作！',
})

// 模拟 API 删除函数
const deleteItemApi = async id => {
  // 模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 1000))
  console.log(`删除单条数据: ${id}`)
  ElMessage.success('删除成功')
}

const deleteBatchApi = async ids => {
  // 模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 1500))
  console.log(`批量删除数据: ${ids.join(', ')}`)
  ElMessage.success(`成功删除 ${ids.length} 条数据`)
  selectedItems.value = []
}

const deleteDangerousApi = async () => {
  // 模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 2000))
  console.log('执行危险删除操作')
  ElMessage.success('危险操作执行成功')
}

// 1. 基础删除示例
const handleBasicDelete = async () => {
  try {
    // 方式一：使用 hook 实例
    await deleteConfirmHook.confirmDeleteSingle(() => deleteItemApi(1), '用户张三')
  } catch (error) {
    console.log('用户取消删除')
  }
}

// 2. 批量删除示例
const handleBatchDelete = async () => {
  try {
    // 方式二：使用快速方法
    await deleteConfirm.batch(() => deleteBatchApi(selectedItems.value), selectedItems.value)
  } catch (error) {
    console.log('用户取消批量删除')
  }
}

// 3. 危险删除示例
const handleDangerousDelete = async () => {
  try {
    await deleteConfirmHook.confirmDeleteDangerous(
      () => deleteDangerousApi(),
      'DANGER' // 需要输入的确认文本
    )
  } catch (error) {
    console.log('用户取消危险删除')
  }
}

// 4. 自定义删除示例
const handleCustomDelete = async () => {
  try {
    await deleteConfirmHook.showDeleteConfirm(() => deleteItemApi(999), {
      title: '自定义删除',
      message: '这是一个完全自定义的删除确认弹窗',
      subMessage: '你可以自定义标题、内容、按钮文字等所有内容',
      confirmButtonText: '立即删除',
      cancelButtonText: '我再想想',
      type: 'error',
    })
  } catch (error) {
    console.log('用户取消自定义删除')
  }
}

// 在实际项目中的使用示例
const handleDeleteUser = async userId => {
  try {
    await deleteConfirm.single(async () => {
      // 调用删除用户的 API
      await deleteUserApi(userId)
      // 删除成功后刷新列表
      refreshUserList()
    }, '该用户')
  } catch (error) {
    // 用户取消删除或删除失败
    if (error !== 'cancel') {
      ElMessage.error('删除失败：' + error.message)
    }
  }
}

const handleBatchDeleteUsers = async () => {
  const selectedIds = getSelectedUserIds()

  try {
    await deleteConfirm.batch(async () => {
      await batchDeleteUsersApi(selectedIds)
      refreshUserList()
      clearSelection()
    }, selectedIds)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败：' + error.message)
    }
  }
}

// 模拟其他 API 函数
const deleteUserApi = async id => {
  console.log(`删除用户 API: ${id}`)
}

const batchDeleteUsersApi = async ids => {
  console.log(`批量删除用户 API: ${ids}`)
}

const refreshUserList = () => {
  console.log('刷新用户列表')
}

const clearSelection = () => {
  console.log('清空选择')
}

const getSelectedUserIds = () => {
  return [1, 2, 3]
}
</script>

<style scoped>
.delete-demo {
  padding: 20px;
  max-width: 800px;
}

.demo-desc {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

:deep(.el-card__header) {
  font-weight: 500;
}
</style>
